
import seconds from '@/assets/seconds@2x.png'
import { getDetailById, getProgramDataToList } from '@/apis/scheme2.0'
export default {
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      currentIndex: 0,
      // 图标
      seconds,
      swipeList: [],
      // 是否已收藏
      collected: false,
      // 导航
      currentAnchor: 'hidden',
      anchors: [
        { label: '详情', value: 'descWhole' },
        // { label: '顾客需求', value: 'customerNeeds' },
        { label: '空间详情', value: 'spaceDetail' },
        { label: '推荐', value: 'recommendProd' }
      ],
      detail: {},
      spaceList: [], // 空间详情
      recommendList: []
    }
  },
  computed: {
    labelBtn() {
      if (!this.detail || !this.detail.id) return []
      const detailed = this.detail
      const tmpArr = []
      for (const key in detailed) {
        let flag = false
        if (detailed.programmeTypeCode === 'Ordinary' || detailed.programmeTypeCode === 'Building') {
          flag = (
            (key === 'cabinetColorNames' && detailed['cabinetColorNames'].length > 0) ||
            (key === 'doorColorName' && detailed['doorColorName'].length > 0) ||
            (key === 'doorTechnologys' && detailed['doorTechnologys'].length > 0) ||
            (key === 'livingRoom' && detailed['livingRoom'].length > 0) ||
            (key === 'building' && detailed['building'].length > 0) ||
            (key === 'topics' && detailed['topics'].length > 0)
          )
        } else {
          flag = (
            (key === 'cabinetColorNames' && detailed['cabinetColorNames'].length > 0) ||
            (key === 'doorColorName' && detailed['doorColorName'].length > 0) ||
            (key === 'doorTechnologys' && detailed['doorTechnologys'].length > 0) ||
            (key === 'livingRoom' && detailed['livingRoom'].length > 0) ||
            (key === 'building' && detailed['building'].length > 0) ||
            (key === 'series' && detailed['series'].length > 0) ||
            (key === 'topics' && detailed['topics'].length > 0)
          )
        }

        if (flag) {
          if (key === 'topics') {
            detailed.topics.forEach(item => {
              tmpArr.push(item)
            })
          } else {
            tmpArr.push(detailed[key])
          }
        }
      }
      return tmpArr
    },
    params() {
      return [
        /* { label: '楼盘', value: this.detail.building },
        { label: '居室', value: this.detail.livingRoom },
        { label: '系列', value: this.detail.series }, */
        { label: '家庭类型', value: this.detail.familyNumber },
        { label: '风格', value: this.detail.style },
        { label: '面积', value: this.detail.houseArea ? `${this.detail.houseArea}㎡` : '' }
      ]
    },
    isShowCustomerNeeds() {
      // 方案类型: Ordinary->普通方案,Building->楼盘方案,Main->主推样板间,Product->单空间案例,New->新品方案,Package->套餐方案,Model_Room->样板间
      // 仅以下类型方案显示顾客需求：主推样板间、新品方案、套餐方案、样板间
      const showTyps = ['Main', 'New', 'Package', 'Model_Room']
      return showTyps.includes(this.detail.programmeTypeCode)
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    // 获取详情
    getDetail() {
      getDetailById(this.id).then(res => {
        this.detail = res.data
        const { houseOriginalImageUrl, houseImageUrl, panoramaUrl, coverImageUrl, coverOriginalImageUrl } = res.data
        this.swipeList = [
          {
            type: 'image',
            src: coverOriginalImageUrl || coverImageUrl
          }
        ]

        const roomList = (this.detail.newRoomDataList || []).map(e => {
          const picList = (e.adsEffectDrawingUrls || []).map(v => {
            return v.imageUrl
          })
          return {
            ...e,
            ...{
              type: 'image',
              picList
            }
          }
        })
        const houseImage = (houseOriginalImageUrl || houseImageUrl) ? [{
          type: 'image',
          secondSpaceType: '方案户型',
          picList: [houseOriginalImageUrl || houseImageUrl],
          panoramaUrl
        }] : []
        this.spaceList = [...houseImage, ...roomList]
      })

      getProgramDataToList(this.id).then(res => {
        this.recommendList = (res.data || []).map(e => {
          e.type = 'image'
          e.src = e.coverSmallImageUrl || e.coverImageUrl
          e.label = e.programmeName
          return e
        })
      })
    },
    // 取消收藏
    cancelCollectHandle() {
      this.collected = false
    },
    // 收藏
    collectHandle() {
      this.collected = true
    },
    // 锚点切换
    // 获取下一个锚点
    getAnchor(left = true) {
      for (let i = 0; i < this.anchors.length; i++) {
        const a = this.anchors[i]
        if (a.value === this.currentAnchor) {
          if (left) {
            if (i + 1 > this.anchors.length - 1) {
              return this.anchors[0]
            } else {
              return this.anchors[i + 1]
            }
          } else {
            if (i - 1 < 0) {
              return this.anchors[this.anchors.length - 1]
            } else {
              return this.anchors[i - 1]
            }
          }
        }
      }
    },
    leftHandle() {
      const a = this.getAnchor(true)
      if (a) {
        this.$refs.anchorNav.clickHandle(a)
      }
    },
    rightHandle() {
      const a = this.getAnchor(false)
      if (a) {
        this.$refs.anchorNav.clickHandle(a)
      }
    },
    proDetailHandle(item) {
      this.$set(item, 'bool', !item.bool)
    }
  }
}
